// pages/anim/mp-anim1/mp-anim1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    state: true,
    containerStyle: 'width:100vw; height:auto;background:#3a28d033;padding:10rpx 50rpx',
    containerStyle1: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.animate('#demo-container', [
      { opacity: 0.5, rotateX: 0, translateX: '300rpx', backgroundColor: '#ff0000' },// 红色
      { opacity: 1, rotateX: 45, translateX: '-300rpx', backgroundColor: '#00ff00' },// 绿色
      { opacity: 1, rotateX: 45, translateX: '-300rpx', backgroundColor: '#00ff00' },
      { opacity: 1, rotateX: 45, translateX: '-300rpx', backgroundColor: '#00ff00' },
      { opacity: 1, rotateX: 45, translateX: '-300rpx', backgroundColor: '#00ff00' },
      { opacity: 0.5, rotateX: 150, rotateY: 150, backgroundColor: '#0000ff' },// 蓝色 ;发3色时长接近不是中间多了就多了
    ], 8000)

    this.animate('.block', [
      { scale: [0.5, 1], translateY: '50px', ease: 'ease-out' },
      // { scale: [1, 1], translateY: '50px', ease: 'ease-in' },
      { scale: [2, 2], rotate: 90 },
    ], 5000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.animate('#container', [
      { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
      { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
      { opacity: 0.3, rotate: 90, backgroundColor: '#FF0000' },
      { opacity: 1.0, rotate: 270, backgroundColor: '#FFFF00', ease: 'ease-in-out', width: '300rpx' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
    }.bind(this))

    this.animate('.box-r30 ', [
      { scale: [1, 1], rotate: 0, ease: 'ease-out' },
      { scale: [0.7, 0.7], rotate: 45, ease: 'ease-in', offset: 0.9 },
      { scale: [1.3, 1.3], rotate: 90 },
    ], 1000, function () {
      // this.clearAnimation('.block', function () {
      //   console.log("清除了.block上的所有动画属性")
      // })
    }.bind(this)) // bind(this) 是匿名函数关联外部this的 。或者使用箭头函数

  },

  change(e) {
    console.log('change-->', e)
    this.setData({
      state: e.currentTarget.dataset.state
    })

    this.startAnim()
  },

  startAnim() {
    this.animate('#container1', [
      { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
      { opacity: 0.6, rotate: 45, backgroundColor: '#00FF00', offset: 0.9 },
      { opacity: 0.2, rotate: 90, backgroundColor: '#FF0000' },
    ], 3000, function () {
      this.clearAnimation('#container1', { opacity: true, rotate: true }, function () {
        console.log("清除了#container1上的动画属性")
      })
    }.bind(this))
    // 在app.json中使用了  "style": "v2",后出现异显。与分包等无关
    this.animate('.block3', [
      { scale: [1, 1], rotate: 0, ease: 'ease-out' },
      { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9 },
      { scale: [2, 2], rotate: 90 },
    ], 3000, () => {
      this.clearAnimation('.block3', { opacity: true, rotate: true }, function () {
        console.log("清除了block3上的动画属性")
      })
    }
    )
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})